<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :width="width"
    :fullscreen="fullscreen"
    :show-close="false"
    custom-class="custom-dialog"
  >
    <template slot="title">
      <el-row :gutter="gutterNum">
        <el-col :span="16">
          <img class="title_logo" :src="titlelogo" alt="" />
          <span class="title_title">{{ title_title }}</span>
          <span class="title_desc">{{ title_desc }}</span>
        </el-col>
        <el-col :span="8">
          <div class="title_rightimg">
            <el-date-picker
              v-model="monthVal"
              type="month"
              prefix-icon="el-icon-arrow-down"
              :clearable="false"
              placeholder="选择月"
            >
            </el-date-picker>

            <img
              class="title_fullscreen"
              @click="fullClick"
              :src="fullscreen ? fullscreenfalseimg : fullscreenimg"
              alt=""
            />
            <img
              class="title_close"
              @click="
                dialogVisible = false;
                fullscreen = false;
              "
              :src="closeimg"
              alt=""
            />
          </div>
        </el-col>
      </el-row>
    </template>

    <slot>body内容</slot>
  </el-dialog>
</template>
     
    <script>
export default {
  props: {
    titlelogo: {
      default: "",
    },
    title_title: {
      type: String,
      default: "标题",
    },
    title_desc: {
      type: String,
      default: "标题描述",
    },
    monthVal: {
      type: String,
      default: "2024-06",
    },
  },
  data() {
    return {
      gutterNum: 24,
      closeimg: require("@/assets/img/close.svg"),
      fullscreenimg: require("@/assets/img/fullscreen.svg"),
      fullscreenfalseimg: require("@/assets/img/fullscreenfalse.svg"),
      width: "70%",
      fullscreen: false,
      dialogVisible: false,
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    },
    openDialog() {
      this.dialogVisible = true;
    },
    fullClick() {
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>
  <style scoped lang="less">
@linecolor: #dedede;

/deep/ .el-dialog__header {
  padding: 15px 20px 15px;
  border-bottom: 1px solid @linecolor;
  background: #fff;
}

/deep/ .el-dialog__body {
  padding: 20px;
}
/deep/ .el-dialog {
  background-color: rgba(255, 255, 255, 0.8);
}

.title_logo {
  height: 30px;
  width: 30px;
  vertical-align: middle;
}
.title_title {
  font-size: 16px;
  color: #222;
  padding-left: 10px;
  font-weight: 600;
}
.title_desc {
  padding-left: 10px;
  font-size: 12px;
  color: #999;
}
.title_rightimg {
  text-align: right;
  /deep/ .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100px;
  }
  /deep/ .el-input__prefix {
    left: auto;
    right: 5px;
    color: #000;
    font-weight: 700;
    top: -3px;
  }

  /deep/ .el-input--small .el-input__inner {
    height: 29px;
    line-height: 29px;
  }

  /deep/ .el-input--prefix .el-input__inner {
    padding-left: 15px;
    padding-right: 0;
    border-radius: 100px;
    background: #e7eaf1;
    color: #000;
    font-weight: 700;
    vertical-align: bottom;
  }
  .title_fullscreen {
    color: red;
    height: 25px;
    width: 25px;
    cursor: pointer;
    margin-left: 40px;
  }
  .title_close {
    margin-left: 20px;
    height: 20px;
    width: 20px;
    cursor: pointer;
  }
}
</style>